<script lang="ts" setup>
import { type FormInstance, Message } from '@arco-design/web-vue'
import { useForm } from '@/hooks'
import { ClassInfoApi, LessonApi } from '@/apis'
import { copyFields } from '@/utils/tools'

const emit = defineEmits(['change'])
const route = useRoute()
const visible = ref(false)
const dataId = ref()

const { form, resetForm } = useForm<LessonApi.LessonUpdateReq>({
  title: undefined,
  classId: undefined,
  classroomId: undefined,
  campusId: undefined,
  leadTeacherId: undefined,
  assistTeacherId: undefined,
  startTime: undefined,
  endTime: undefined,
  lessonStatus: 0,
  description: undefined,
  lessonDate: undefined,
})
const formRef = ref<FormInstance>()
const rules: FormInstance['rules'] = {
  title: [{ required: true, message: '请输入课次名称' }],
  classId: [{ required: true, message: '请选择班级' }],
  classroomId: [{ required: true, message: '请选择教室' }],
  leadTeacherId: [{ required: true, message: '请选择主讲老师' }],
  lessonDate: [{ required: true, message: '请选择上课日期' }],
  startTime: [{ required: true, message: '请选择开始/结束时间' }],
}
const times = ref<Array<string> | undefined>([])

const beforeOk = async () => {
  const isInvalid = await formRef.value?.validate()
  if (!isInvalid) {
    try {
      await LessonApi.updateLesson(form, dataId.value)
      Message.success('修改成功')
      return true
    } catch (_) {
      return false
    }
  }
  return false
}

watch(times, (val) => {
  if (val) {
    form.startTime = val[0]
    form.endTime = val[1]
  } else {
    form.startTime = ''
    form.endTime = ''
  }
})

// 校区教室
const onClassroomSelect = (item) => {
  form.campusId = item.campusId
}

const handleOk = async () => {
  emit('change')
}

const handleCancel = () => {
  visible.value = false
}

const open = (item: ClassInfoApi.ClassLessonResp) => {
  if(!item || !item.id) {
    return
  }
  resetForm()
  dataId.value = item.id
  copyFields(item, form)
  times.value = [item.startTime, item.endTime]
  visible.value = true
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal
    v-model:visible="visible"
    :title="'编辑课次信息'"
    width="700px"
    :body-style="{ padding: '15px' }"
    :on-before-ok="beforeOk"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width layout="vertical">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-form-item label="课次标题" field="title">
            <a-input v-model="form.title" placeholder="请输入课次标题" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="教室" field="classroomId">
            <!-- <ClassroomCascader v-model:campus-id="form.campusId" v-model:classroom-id="form.classroomId" placeholder="请选择教室" /> -->
            <ClassroomSelect v-model="form.classroomId" placeholder="请选择教室" @select="onClassroomSelect" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="主讲老师" field="leadTeacherId">
            <EmployeeSelect v-model="form.leadTeacherId" type="LEAD_TEACHER" placeholder="请选择主讲老师" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="辅导老师" field="assistTeacherId">
            <EmployeeSelect v-model="form.assistTeacherId" type="ASSIST_TEACHER" placeholder="请选择辅导老师" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="上课日期" field="lessonDate">
            <a-date-picker v-model="form.lessonDate" placeholder="上课日期" class="w-full" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="开始/结束时间" field="startTime">
            <a-time-picker v-model="times" type="time-range" format="HH:mm" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="状态" field="lessonStatus">
            <DictSelect v-model="form.lessonStatus" type="button" code="LessonStatusEnum" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" field="description">
            <a-textarea v-model="form.description" placeholder="请输入备注" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped>

</style>
